<!--
 	* @author  dumeng
 	* @desc 从平台端选取标签
-->
<template>
  <div class="select-course4platform">
    <div class="container-inner">
      <el-steps class="comment-step" :active="stepActive" simple finish-status="success">
        <el-step v-for="(item, index) in stepList" :key="index" :title="item.title" :status="item.status" />
      </el-steps>
      <div v-if="stepActive === 0" class="step-one">
        <div class="leftWrap">
          <div class="btn-container-title" style="margin-bottom:10px;">
            <span style="font-size: 16px;font-weight: 700;color:#333;">您想将平台标签添加到本单位的哪个标签分类下,请选择</span>
          </div>
          <div class="search-tree-wrap">
            <el-input
              v-model.trim="filterTreeText"
              style="width:100%;margin-right:20px"
              placeholder="输入关键字进行过滤"
              class="search-input"
              clearable
            />
          </div>
          <el-scrollbar class="tree-scrollbar">
            <el-tree
              ref="courseTree"
              key="newTree"
              v-loading="treeLoading"
              node-key="id"
              :data="setpOneTreeData"
              :expand-on-click-node="false"
              :props="defaultProps"
              default-expand-all
              class="dictTree"
              highlight-current
              :filter-node-method="filterNode"
              :indent="30"
              @node-click="handleOneStepNodeClick"
            >
              <span slot-scope="{ node, data }" :class="{ 'custom-tree-node': data.id === selectSelfData.id }">
                <span class="label-tree">{{ node.label }}</span>
              </span>
            </el-tree>
          </el-scrollbar>
        </div>
      </div>
      <div v-if="stepActive === 1" class="step-two">
        <split-pane split="vertical" :min-percent="0" :default-percent="20" class="warpper-box">
          <template slot="paneL">
            <div class="leftWrap">
              <div class="btn-container-title" style="margin-bottom:10px;">
                <span style="font-size: 16px;font-weight: 700;color:#333;">平台端标签分类</span>
              </div>
              <div class="search-tree-wrap">
                <el-input
                  v-model.trim="filterTreeText"
                  style="width:100%;margin-right:20px"
                  placeholder="输入关键字进行过滤"
                  class="search-input"
                  clearable
                />
              </div>
              <el-scrollbar class="tree-scrollbar">
                <el-tree
                  ref="courseTree"
                  key="newTree"
                  v-loading="treeLoading"
                  :data="treeData"
                  :expand-on-click-node="false"
                  :props="defaultProps"
                  default-expand-all
                  class="dictTree"
                  highlight-current
                  :filter-node-method="filterNode"
                  :indent="30"
                  @node-click="handleNodeClick"
                >
                  <span slot-scope="{ node, data }" :class="{ 'custom-tree-node': data.id === classifyId }">
                    <span class="label-tree">{{ node.label }}</span>
                  </span>
                </el-tree>
              </el-scrollbar>
            </div>
          </template>
          <template slot="paneR">
            <el-main class="user-main">
              <div v-if="!isShow" class="ts-con">
                <div class="ts">
                  <i class="el-icon-info" />
                  <span v-html="showMsg" />
                </div>
              </div>
              <div v-else class="select-course-container">
                <el-row>
                  <el-col :span="24">
                    <div class="select-inner-item">
                      <div class="item-label">当前选择本企业所属分类:</div>
                      <span style="color:red;">{{ selectSelfData.ptressIdsValue }}</span>
                    </div></el-col
                  >
                </el-row>

                <div class="show-table">
                  <el-collapse-transition>
                    <div class="course-search separate">
                      <div class="course-search-inner">
                        <el-row>
                          <el-col :span="12">
                            <div class="search-inner-item">
                              <div class="item-label">标签名称搜索</div>
                              <el-input v-model.trim="search.name" style="width: 90%;" class="filter-item" placeholder="请输入名称搜索" />
                            </div>
                          </el-col>
                          <!-- <el-col :span="8">
                            <div class="search-inner-item">
                              <div class="item-label">简介搜索</div>
                              <el-input v-model.trim="search.courseIntroduce" style="width: 90%;" class="filter-item" placeholder="请输入简介搜索" />
                            </div>
                          </el-col> -->
                          <el-col :span="8">
                            <div class="search-inner-item">
                              <el-checkbox v-model="sort" :true-label="1" :false-label="0" checked>仅显示未在本企业添加的平台标签</el-checkbox>
                            </div>
                          </el-col>
                        </el-row>
                      </div>
                      <div class="course-search-btn">
                        <el-button type="primary" @click="handleFilter">搜索</el-button>
                        <el-button class="filter-item" type="primary" @click="resettingBtn">重置</el-button>
                      </div>
                    </div>
                  </el-collapse-transition>
                  <div class="table">
                    <v-table
                      :list="list"
                      tag="saasLabel"
                      :list-loading="listLoading"
                      :filter-column="filtercolumn"
                      :selection="false"
                      :source-arr="sourceArr"
                    >
                      <el-table-column fixed="right" label="操作" width="200" align="center">
                        <template slot-scope="scope">
                          <el-button type="text" size="small" @click="handleView(scope.row)">查看</el-button>
                          <el-button type="text" size="small" @click="handleRowClick(scope.row)">选择</el-button>
                        </template>
                      </el-table-column>
                    </v-table>
                  </div>
                  <div class="btn-pagion fix">
                    <pagination v-show="total > 0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" />
                  </div>
                </div>
              </div>
            </el-main>
          </template>
        </split-pane>
        <div class="show-tag">
          <p style="font-size: 16px;font-weight: 700;color:#333;">已选中标签</p>
          <el-tooltip v-for="tag in multipleSelection" :key="tag.id" class="item" effect="dark" :content="tag.name" placement="left-end">
            <div>
              <el-tag class="tag-item etc" closable @close="handleCloseTag(tag)">
                {{ tag.name }}
              </el-tag>
            </div>
          </el-tooltip>
        </div>
      </div>
      <div v-if="stepActive === 2" class="step-three">
        <div class="show-text">
          <div class="tip">
            您在<span style="color:red;">{{ selectSelfData.ptressIdsValue }}</span
            >分类下,共添加 <span style="color:red;">{{ multipleSelection.length }}</span
            >个标签
          </div>
          <div class="courseBox">
            <el-tooltip v-for="tag in multipleSelection" :key="tag.id" class="item" effect="dark" :content="tag.name" placement="left-end">
              <el-tag class="tag-item etc" style="margin-right: 5px;" closable @close="handleCloseTag(tag)">
                {{ tag.name }}
              </el-tag>
            </el-tooltip>
          </div>
        </div>
      </div>
    </div>
    <div class="course-create-footer">
      <el-button @click="handleBack">取 消</el-button>
      <el-button v-if="stepActive !== 0" @click="handleNext('Fallback')">上一步</el-button>
      <el-button v-if="stepActive !== 2" @click="handleNext('next')">下一步</el-button>
      <el-button v-if="stepActive === 2" type="primary" @click="handleNext('submit')">确定</el-button>
    </div>

    <el-dialog v-el-drag-dialog :close-on-click-modal="false" :visible.sync="viewShow" title="查看" center width="800px">
      <el-tabs>
        <el-tab-pane label="标签基本信息">
          <el-row class="see-dialog">
            <el-col v-if="coursewareInfo.courseImgUrl" :span="24" class="view-item"
              >标签封面：
              <el-image
                style="width: 100px; height: auto;display: inline-block;vertical-align: top;"
                :src="coursewareInfo.courseImgUrl"
                :preview-src-list="[coursewareInfo.courseImgUrl]"
              />
            </el-col>
            <el-col :span="24" class="view-item"
              >标签名称：<span class="view-content">{{ coursewareInfo.name }}</span>
            </el-col>
            <el-col :span="24" class="view-item"
              >标签分类：<span class="view-content">{{ coursewareInfo.courseClassifyValue || '' }}</span></el-col
            >
            <el-col :span="24" class="view-item"
              >标签来源：<span class="view-content">{{ coursewareInfo.courseSource || '' }}</span></el-col
            >
            <el-col :span="24" class="view-item"
              >关键词：<span class="view-content">{{ coursewareInfo.courseKeyword || '' }}</span></el-col
            >
          </el-row>
        </el-tab-pane>
      </el-tabs>
      <section slot="footer" class="dialog-footer">
        <el-button style="padding: 10px 30px;" @click="viewShow = false">关 闭</el-button>
      </section>
    </el-dialog>
    <el-dialog
      v-if="preview.state"
      v-el-drag-dialog
      :visible.sync="preview.state"
      :close-on-click-modal="false"
      title="查看"
      center
      width="600px"
      :fullscreen="isFull"
      @close="preview.stat = false"
    >
      <div v-if="preview.fileType === 'KCLX02'" class="full">
        <el-button size="small" type="primary" icon="el-icon-full-screen" @click="isFull = !isFull">{{ isFull ? '取消全屏' : '全屏' }}</el-button>
      </div>
      <div>
        <courseware-preview v-if="preview.state" :is-full="isFull" :type="preview.fileType" show-type="after" :file-id="preview.fileId" />
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { fetchClassify, fetchList4course, getDictByCode, queryList, fetchClassIfication, submitData } from './api'
import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
import permission from '@/directive/permission/index.js' // 权限判断指令
import elDragDialog from '@/directive/el-drag-dialog' // base on element-ui
import splitPane from 'vue-splitpane'
import vTable from '@/components/Table'
import CoursewarePreview from '../../components/CoursewarePreview'
export default {
  name: 'SelectCourse4flatform',
  components: { Pagination, splitPane, vTable, CoursewarePreview },
  directives: { permission, elDragDialog },
  filters: {},
  data() {
    return {
      visible: true,
      isShow: false,
      showMsg: '请选择标签分类！',
      treeLoading: false,
      listLoading: false,
      listQuery: {
        page: 1,
        limit: 10,
        isSearch: 0
      },
      search: {
        name: ''
      },
      sourceArr: ['courseImgUrl'],
      list: [],
      treeData: [],
      filterTreeText: '',
      total: 0,
      defaultProps: {
        children: 'children',
        label: 'classifyName'
      },
      breadList: [],
      currentNode: {},
      dict: {
        KCLX: [] // 课件类型
      },
      classifyId: '',
      activeTab: '0',
      stepActive: 0,
      stepList: [
        {
          title: '选择标签所属分类',
          status: ''
        },
        {
          title: '选择平台端标签',
          status: ''
        },
        {
          title: '设置/发布',
          status: ''
        }
      ],
      selectSelfData: {},
      multipleSelection: [],
      preview: {
        fileId: '',
        fileType: '',
        showType: 'after',
        state: false
      },
      isFull: false,
      viewShow: false,
      coursewareInfo: {},
      sort: 1,
      setpOneTreeData: []
    }
  },
  watch: {
    filterTreeText(val) {
      this.$refs.courseTree.filter(val)
    }
  },
  created() {
    this.getTreeData()
  },
  methods: {
    filtercolumn(scope, item) {
      if (item === 'subjectNum') {
        return `${scope.row.subjectNum || '0'} / ${scope.row.quoteNum || '0'}`
      } else {
        return scope.row[item]
      }
    },
    /**
     * 选择标签
     */
    handleSelectionChange(arr) {
      if (this.multipleSelection.includes(arr[0])) {
        return this.$message({ type: 'warning', message: '该标签已在选中列表了，无需二次添加!' })
      }

      const obj = {}
      const multipleSelection = [...this.multipleSelection, ...arr]
      multipleSelection.forEach((item) => {
        obj[item.id] = item
      })
      this.multipleSelection = Object.values(obj)
    },
    /**
     * 查看
     */
    handleSee() {},
    filterNode(value, data) {
      if (!value) return true
      return data.classifyName.indexOf(value) !== -1
    },
    /**
     * 获取字典
     */
    getDict(code) {
      return new Promise((resolve, reject) => {
        getDictByCode(code)
          .then((res) => {
            this.dict[code] = res.data.data && res.data.data.length > 0 ? res.data.data[0].list : []
          })
          .catch((error) => {
            reject(error)
          })
      })
    },
    getTreeData() {
      this.treeLoading = true
      if (this.stepActive === 0) {
        return new Promise((resolve, reject) => {
          fetchClassIfication({ classifyType: 'FLLX_BQ' })
            .then((response) => {
              this.treeLoading = false
              this.setpOneTreeData = response.data.data
              this.classifyId = response.data.data[0].id
              resolve()
            })
            .catch((error) => {
              reject(error)
              this.treeLoading = false
            })
        })
      } else {
        return new Promise((resolve, reject) => {
          fetchClassify({ classifyType: 'FLLX_BQ' })
            .then((response) => {
              this.treeLoading = false
              this.treeData = response.data.data
              this.classifyId = response.data.data[0].id
              resolve()
              if (this.treeData.length > 0) {
                this.$nextTick(() => {
                  const node = this.$refs.courseTree.getCheckedNodes()
                  this.handleNodeClick({ id: this.classifyId }, node)
                })
              }
            })
            .catch((error) => {
              reject(error)
              this.treeLoading = false
            })
        })
      }
    },
    getList(obj) {
      this.listLoading = true
      var query = {
        page: obj ? obj.page : this.listQuery.page,
        pageSize: obj ? obj.limit : this.listQuery.limit,
        classifyId: this.classifyId,
        name: this.search.name,
        sort: this.sort
      }
      return new Promise((resolve, reject) => {
        fetchList4course(query)
          .then((response) => {
            this.list = response.data.data.rows
            this.total = response.data.data.total
            this.listLoading = false
          })
          .catch((error) => {
            reject(error)
            this.listLoading = false
          })
      })
    },
    rowClass({ row, rowIndex }) {
      return {
        padding: '5px 0',
        height: '10px',
        background: 'rgba(247,247,248,1)'
      }
    },
    handleFilter() {
      this.listQuery.page = 1
      this.getList()
    },
    resettingBtn() {
      for (const i in this.search) {
        if (this.search['' + i + ''] instanceof Array) {
          this.search['' + i + ''] = []
        } else {
          this.search['' + i + ''] = ''
        }
      }
      this.listQuery.page = 1
      this.getList()
    },
    /**
     * 获取当前树节点和其父级节点
     */
    getTreeNode(Node) {
      if (Node) {
        if (Node.label !== undefined) {
          this.breadList.unshift(Node.label) // 在数组头部添加元素
          this.getTreeNode(Node.parent) // 递归
        }
      }
    },
    // 点击树
    handleNodeClick(data, Node) {
      this.breadList = []
      this.getTreeNode(Node)
      this.currentNode = Object.assign({}, data)
      this.classifyId = data.id
      this.resettingBtn()
      this.isShow = true
    },
    handleNext(type) {
      if (type === 'submit') {
        const loading = this.$loading({
          lock: true,
          text: '请稍后',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.3)'
        })
        const parmas = Object.assign({}, this.form)
        parmas['id'] = this.multipleSelection.map((i) => i.id).join(',')
        parmas['classifyId'] = this.selectSelfData.id
        submitData(parmas)
          .then((res) => {
            loading.close()
            this.$message({
              type: 'success',
              message: '操作成功！'
            })
            this.handleBack()
          })
          .catch((error) => {
            loading.close(error)
          })
      } else if (type === 'next') {
        if (this.stepActive === 0) {
          if (this.selectSelfData.classifyName) {
            this.stepActive += 1
            this.getTreeData()
          } else {
            this.$message({ type: 'warning', message: '请选择标签分类' })
          }
        } else if (this.stepActive === 1) {
          if (this.multipleSelection.length <= 0) {
            this.$message({ type: 'warning', message: '请选择您需要添加的标签！' })
          } else if (this.multipleSelection.length > 20) {
            this.$message({ type: 'warning', message: '一次最多只能添加20门标签！' })
          } else {
            this.stepActive += 1
          }
        }
      } else if (type === 'Fallback') {
        // this.getTreeData()
        this.stepActive -= 1
        if (this.stepActive === 0) {
          this.$nextTick(() => {
            this.$refs.courseTree.setCurrentKey(this.selectSelfData.id)
          })
        }
      }
    },
    handleOneStepNodeClick(data, Node) {
      console.log(data)
      this.selectSelfData = data
    },
    handleCloseTag(tag) {
      this.multipleSelection.splice(
        this.multipleSelection.findIndex((i) => {
          return i.id === tag.id
        }),
        1
      )
    },
    // 点击行触发，选中或不选中复选框
    handleRowClick(row) {
      this.handleSelectionChange([row])
    },
    handleView(row) {
      const loading = this.$loading({
        lock: true,
        text: '请稍后',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.3)'
      })
      this.coursewareInfo = row
      queryList({ id: row.id })
        .then((res) => {
          this.coursewareInfo.subjectList = res.data.data.subjects || []
          this.$nextTick(() => {
            loading.close()
            this.viewShow = true
          })
        })
        .catch(() => {
          loading.close()
        })
    },
    handlePreview(i, t) {
      this.preview.fileId = i.subject.courseIdUrl
      this.preview.fileType = i.subject.subjectType
      this.preview.state = true
    },
    handleBack() {
      this.$router.back()
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss">
$dark_gray: #bfced6;
.select-course4platform {
  box-sizing: border-box;

  position: relative;
  height: calc(100vh - 60px);
  .warpper-box {
    height: calc(100vh - 60px);
    position: relative;
    // overflow-y: auto;
    flex: 1;
  }
  .view-item {
    margin-bottom: 10px;

    .view-content {
      color: #333;
      font-weight: 500;
    }
  }
  .see-dialog {
    height: 460px;
    overflow-y: auto;
    .textarea-view {
      white-space: pre-line;
      border: 1px solid #e5e5e5;
      border-radius: 6px;
      padding: 10px;
      color: #333;
      background-color: #f9f9f9;
      font-weight: normal;
    }
  }
  .vue-splitter-container {
    width: 100%;
  }
  .container-inner {
    position: absolute;
    top: 0;
    width: 100%;
    bottom: 50px;
    height: 100%;
    overflow-y: auto;
    padding: 10px 20px;
    background-color: #fff;
    &::-webkit-scrollbar {
      width: 8px; /*对垂直流动条有效*/
      height: 1px; /*对水平流动条有效*/
    }
    /** 滚动条轨道*/
    &::-webkit-scrollbar-track {
      box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
      background-color: white;
      border-radius: 3px;
    }
    /** 滚动条里面小方块*/
    &::-webkit-scrollbar-thumb {
      height: 32px;
      border-radius: 5px;
      box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.1);
      background-color: #eaeaea;
    }
    &:hover {
      overflow: auto;
    }
  }
  .leftWrap {
    background: #fff;
    padding: 10px;
    height: 100%;
    // overflow-y: auto;
    overflow: hidden;
    .search-tree-wrap {
      display: flex;
      justify-content: space-between;
      align-items: center;
      .tree-filter {
        padding: 10px 18px;
      }
    }
    .tree-scrollbar {
      overflow: hidden;
      .el-scrollbar__wrap {
        max-height: calc(100vh - 157px);
        .el-scrollbar__view {
          padding-bottom: 50px;
        }
      }
    }
    .el-tree-node__content {
      margin-top: 10px;
    }
    /deep/ .el-tree-node__expand-icon.expanded {
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg);
    }
    /deep/ .el-icon-caret-right:before {
      content: '\E7A0';
      font-size: 14px;
    }
    /deep/ .el-tree-node__expand-icon.expanded.el-icon-caret-right:before {
      content: '\E7A2';
      font-size: 14px;
    }
  }
  .user-main {
    padding: 10px 10px 40px 10px;
    position: relative;
    height: 100%;
    overflow-y: auto;
    background: #fff;
    .ts-con {
      position: absolute;
      top: 10px;
      left: 10px;
      right: 10px;
      bottom: 10px;
      background: white;
      .ts {
        line-height: 30px;
        position: absolute;
        left: 50%;
        top: 50%;
        margin-top: -15px;
        margin-left: -110px;
        width: 210px;
        text-align: center;
        background: white;
        border-radius: 2px;
        box-shadow: 1px 1px 5px #e0dbdb;
        font-size: 14px;
        font-family: Microsoft Yahei In-Bold, Microsoft Yahei, Apple LiGothic Medium;
        color: #222222;
      }
    }
    &::-webkit-scrollbar {
      display: none;
    }
    .select-course-container {
      width: 100%;
      background-color: #ffffff;
      height: 100%;
      box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.12), 0 0 6px 0 rgba(0, 0, 0, 0.04);
      padding: 10px;
      overflow-y: auto;
      display: flex;
      flex-direction: column;
      &::-webkit-scrollbar {
        display: none;
      }
      .course-search {
        background-color: #fff;
        padding: 0 10px;
        .svg-container {
          padding: 0 5px 0 10px;
          color: $dark_gray;
          vertical-align: middle;
          display: inline-block;
          &_login {
            font-size: 10px;
          }
        }
        .search-input {
          width: 40%;
          position: relative;
          &:after {
            content: '';
            position: absolute;
            left: -25px;
            right: 0;
            bottom: 0px;
            height: 1px;
            background: rgba(226, 227, 232, 1);
          }
          input {
            outline: none;
            background: transparent;
            border: none;
            outline: medium;
            padding: 0;
            &:focus {
              outline: none;
              background-color: transparent;
            }
          }
        }
        .course-search-btn {
          display: inline-block;
          float: right;
          .el-button.is-round {
            padding: 5px 30px;
            margin-right: 34px;
          }
          .course-search-more {
            font-size: 14px;
            font-weight: 500;
            @include font-color($mainColor);
            cursor: pointer;
            margin-left: 10px;
          }
        }
        &.merge {
          height: 50px;
          line-height: 50px;
        }
        &.separate {
          .course-search-inner {
            padding-top: 10px;
            .search-inner-item {
              padding: 10px;
              .item-label {
                height: 30px;
                line-height: 30px;
                font-size: 14px;
                color: #a6a6a6;
                font-weight: 400;
              }
              .el-checkbox__label {
                font-weight: 400;
              }
              .el-input {
                position: relative;
                .el-input__inner {
                  border: none;
                  padding: 0;
                }
                &:after {
                  content: '';
                  height: 1px;
                  background-color: #e2e3e8;
                  position: absolute;
                  left: 0;
                  right: 0;
                  bottom: 0;
                }
              }
            }
          }
          .course-search-btn {
            text-align: center;
            display: block;
            float: none;
            height: 56px;
            line-height: 56px;
          }
        }
      }
      .btn-container {
        display: flex;
        height: 36px;
        line-height: 36px;
        // margin-top: 15px;
        margin-bottom: 15px;
        .btn-container-title {
          flex: 1;
          height: 36px;
          line-height: 36px;
          font-size: 16px;
          color: rgba(51, 51, 51, 1);
          overflow: hidden;
          text-overflow: ellipsis;
          padding-bottom: 10px;
          white-space: nowrap;
          .btn-container-title-select {
            @include font-color($mainColor);
          }
        }
      }
      .el-table {
        width: 100%;
        height: calc(100% - 40px);
        overflow-y: auto;
        .el-image {
          width: 100%;
          height: auto;
          max-height: 140px;
        }
        &::-webkit-scrollbar {
          display: none;
        }
      }
      .dataForm {
        .el-select {
          width: 100%;
        }
      }
      .show-table {
        flex: 1;
        padding: 0 5px;
      }
    }
  }
  .el-drawer__wrapper {
    .el-drawer__header {
      margin-bottom: 10px;
    }
    .el-drawer__header span:focus {
      outline: none;
    }
    .el-drawer__close-btn:focus {
      outline: none;
    }
  }
  .custom-tree-node {
    width: 100%;
    display: flex;
    font-size: 14px;
    color: $mainColor;
  }

  /deep/.classify-tab {
    width: 100%;
    margin: 10px 0;
    padding: 0 10px;
    background-color: red;
    border-radius: 4px;

    .el-tabs__nav-next {
      line-height: 40px;
    }

    .el-tabs__nav-wrap::after {
      display: none;
    }

    .el-tabs__header {
      margin: 0;
    }
  }

  .select-inner-item {
    display: flex;
    align-items: center;
    .item-label {
      font-size: 16px;
      font-weight: 600;
      color: #333;
      margin-right: 10px;
    }
  }
  .step-one {
    padding: 0 300px;
    height: 100%;
  }
  .step-two {
    display: flex;
    height: 100%;
    .show-tag {
      width: 250px;
      padding: 0 10px;
      border-left: 1px solid #ececec;
      overflow-y: auto;
      .tag-item {
        max-width: 200px;
        margin-top: 3px;
        position: relative;
        padding-right: 18px;
        margin-right: 5px;
        .el-tag__close {
          position: absolute;
          right: 0;
          top: 50%;
          transform: translateY(-50%);
        }
      }
    }
  }

  .step-three {
    padding: 0 300px;
    height: 100%;
    .show-text {
      padding: 20px;
      .tip {
        font-size: 16px;
        color: #333;
      }
      .courseBox {
        padding: 10px;
        margin-left: 10px;
      }
    }
    .form {
      .el-form-item {
        margin: auto;
      }
    }
  }

  .course-create-footer {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    text-align: center;
    padding: 10px 0;
    background-color: white;
    box-shadow: 0 -3px 6px #f5f5f5;
    z-index: 999;
  }

  .splitter-pane-resizer.vertical[data-v-212fa2a4] {
    /* width: 11px; */
    height: 100%;
    margin-left: -5px;
    border-left: 5px solid hsla(0, 0%, 100%, 0);
    border-right: 5px solid hsla(0, 0%, 100%, 0);
    cursor: col-resize;
  }

  .splitter-pane-resizer[data-v-212fa2a4] {
    box-sizing: border-box;
    /* background: #000; */
    position: absolute;
    opacity: 0.2;
    z-index: 1;
    background-clip: padding-box;
  }

  .el-step__head.is-process {
    color: $mainColor !important;
    border-color: $mainColor !important;
  }
  .el-step__title.is-process {
    font-weight: bold;
    color: $mainColor !important;
  }
}
</style>
